<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>老年人游戏</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			#main {
				width: 300px;
				height: 600px;
				background: while;
				margin: 10px auto;
				position: relative;
				overflow: hidden;
			}
			
			#container {
				width: 100%;
				height: 500px;
				position: relative;
				top: -125px;
			}
			
			.row {
				width: 100%;
				height: 125px;
			}
			
			.cell {
				width: 75px;
				height: 125px;
				float: left;
			}
			
			.black {
				background: black;
			}
			
			h1 {
				margin: 0;
				color: red;
				text-align: center;
				z-index: 2;
				position: absolute;
				left: 50%;
			}
			
			#popup {
				display: none;
				width: 220px;
				height: 150px;
				background: darkgray;
				opacity: 0.8;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			
			#fenshu {
				color: red;
				font-size: 20px;
				text-align: center;
				margin-top: 20px;
			}
			
			#chongzhi {
				position: absolute;
				right: 10px;
				bottom: 0;
			}
			
			#over {
				font-size: 30px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<h1 id="score">0</h1>
			<div id="container"></div>
			<div id="popup">
				<div id="over">游戏结束</div>
				<div id="fenshu">点第一个黑块，笨！</div>
				<div id="chongzhi">
					<p>预防老年痴呆，再来一次</p>
				</div>
			</div>

		</div>
		<script type="text/javascript">
			var clock = null; //定时器操作句柄
			var state = 0; //0 初始化,1 进行中,2 暂停,3 失败
			//初始化
			function init() {
				for(var i = 0; i < 3; i++) {
					crow();
				}
				$("main").onclick = function(e) {
					judge(e);
				}
			}

			function judge(e) {
				if(state == 3) {
					return;
				}
				if(e.target.className.indexOf("black") == -1) {
					console.log(e.target.className.indexOf("black"))
					fail();
				} else {
					e.target.className = "cell";
					e.target.parentNode.pass = 1;
					score();
				}
			}

			//start()启动
			function start() {
				var time = setTimeout(function() {
						var rows = document.getElementsByClassName("row");
						rows[2].addEventListener("click", function() {
							clock = window.setInterval("move()", 30);
						})
					})
					//				clock = window.setInterval("move()",30);
			}

			//动画
			function move() {
				var con = $("container");
				var top = parseInt(window.getComputedStyle(con, null)["top"]);
				top += 5;
				con.style.top = top + "px";
				if(top == 0) {
					crow();
					con.style.top = "-125px";
					drow();
				} else if(top == -120) {
					var rows = con.children;
					if((rows.length == 6) && (rows[rows.length - 1].pass !== 1)) {
						fail();
					}
				}
			}

			/*
			 * 失败结束
			 */
			function fail() {
				clearInterval(clock);
//				console.log(state)
				state = 3;
				Popup();
			}
			var newArr = localStorage.getItem('count');
			var numArr = [];
			//			localStorage.getItem("count");
			//			console.log(newArr)
			//计分
			
			var num;
			function score() {
				num = $("score").innerHTML = parseInt($("score").innerHTML) + 1;
				if(num < 10) {
					$("fenshu").innerHTML = "才" + num + "分";
				} else {
					$("fenshu").innerHTML = num + "分";
				}
//				localStorage.setItem("count",numArr);
			}

			//创建div.row
			function crow() {
				var con = $("container");
				var row = cdiv("row");
				var classes = createSn();
				for(var i = 0; i < 4; i++) {
					row.appendChild(cdiv(classes[i]));
				}
				con.insertBefore(row, con.firstChild);
			}

			//删除最后一行
			function drow() {
				var con = $("container");
				if(con.childNodes.length == 7) {
					con.lastChild.remove();
				}
			}

			//创建div,className是其类名
			function cdiv(className) {
				var div = document.createElement("div");
				div.className = className;
				return div;
			}

			function createSn() {
				var arr = ["cell", "cell", "cell", "cell"];
				var i = Math.floor(Math.random() * 4);
				arr[i] = "cell black";
				return arr;
			}

			//按ID获取对象
			function $(id) {
				return document.getElementById(id);
			}

			init();
			start();

			/*
			 * 失败后弹窗
			 */
			function Popup() {
//				console.log(numArr)
//				newArr.push(numArr);
				var popup = document.getElementById("popup");
				var chongzhi = document.getElementById("chongzhi")
				popup.style.display = "block"

				chongzhi.addEventListener("click", function() {
					container.remove();
					var containe = document.createElement("div");
					containe.setAttribute("id", "container")
					main.appendChild(containe);
					location.reload();

				})
//				console.log(num)
//				
//				numArr = newArr;
//				//				console.log(numArr);
//				localStorage.setItem('count', JSON.stringify(numArr));
			}

//			function selectionSort(newArr) {
//				var len = newArr.length;
//				var minIndex, temp;
//				for(var i = 0; i < len - 1; i++) {
//					minIndex = i;
//					for(var j = i + 1; j < len; j++) {
//						if(newArr[j] < newArr[minIndex]) {
//							minIndex = j;
//						}
//						temp = newArr[i];
//						newArr[i] = newArr[minIndex];
//						newArr[minIndex] = temp;
//					}
//					return newArr;
//				}
//				console.log(newArr))
//			}
		</script>
	</body>

</html>